<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
const option = reactive({
  tooltip: {
    trigger: "item",
    transitionDuration: 0, //让提示框跟随鼠标提示
  },
  color: ["#18F6F8", "#288CFC", "#FFEB1B", "#4BF8B2"],
  legend: {
    textStyle: {
      fontSize: "14", // 文字大小
    },
    itemWidth: 14, // icon宽度
    itemHeight: 14, // icon高度
    icon: "rect", //控制形状,其中包括 circle，rect，roundRect，triangle，diamond，pin，arrow，none
    orient: "vertical", //图例方向【horizontal/vertical】
    itemGap: 15,
    right: "8%",
    top: "center",
    data: [
      {
        name: "办公类",
        textStyle: {
          color: "#18F6F8", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "体育类",
        textStyle: {
          color: "#288CFC", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "艺术类",
        textStyle: {
          color: "#FFEB1B", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "活动类",
        textStyle: {
          color: "#4BF8B2", // 单独设置某一个图列的颜色
        },
      },
    ],
  },
  series: [
    {
      name: "物资库存占比",
      type: "pie",
      // 第0个元素的是内院的半径，第1个元素表示的是外圆的半径
      radius: ["50%", "70%"],
      //饼图的位置 第一个控制左右，第二个控制上下
      center: ["40%", "center"],
      avoidLabelOverlap: true,
      clockwise: false,
      // 各部分之间得间隔
      itemStyle: {
        borderRadius: 0,
        borderColor: "",
        borderWidth: 5,
      },
      label: {
        //饼图图形上的文本标签
        show: false,
      },
      data: [
        { value: 1048, name: "办公类" },
        { value: 735, name: "体育类" },
        { value: 484, name: "艺术类" },
        { value: 484, name: "活动类" },
      ],
    },
  ],
})
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
